<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="UTF-8">
		<title>柱状图</title>
	</head>
	<body style="height: 100%;margin: 0;">
		<div id="contar" style="height: 100%;"></div>
		
		<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="../js/echarts.min.js"></script>
		
		<script type="text/javascript">
			
			var names = []
			var nums = []
			
			$.ajax({
				url:"http://localhost:8081/api/getlist.do",//请求地址
				type:"GET",//请求方式是get
				dataType:"json",//返回格式的数据为JSON
				success:function(data){//请求成功完成后要执行的方法
					//each循环使用$.each方式的数据data
					$.each(data.first,function(i,item){
						names.push(item.name);
						nums.push(item.num)
					})
					showdata();
				}
			})
			
			var dom = document.getElementById("contar");
			var myChart = echarts.init(dom);
			
			option = null;
			
			function showdata(){
				option = {
					xAxis:{
						type:'category',
						data:[]
					},
					yAxis:{
						type:'value'
					},
					series:[{
						data:[],
						type:'line'
					}]
				};
			
				option.xAxis.data = names;
				option.series[0].data = nums;
				
				
				if(option && typeof option === "object"){
					myChart.setOption(option,true)
				}
				
			}
		
		
		</script>	
	</body>
</html>
